<template>
    <div class="">
        <headcon></headcon>
        <div class="main clearfix">
            <div class="leftcon">
                <router-link to="/hello">最新资讯</router-link>
                <router-link to="/hello">我发布的资讯</router-link>
                <router-link to="/hello">我关注的资讯</router-link>
            </div>
            <div class="rightcon">
                <router-view></router-view>
            </div>
        </div>
        <footercon></footercon>
  </div>
</template>

<script>
import headcon from "@/components/headcon";
import footercon from "@/components/footercon";
export default {
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  components: { headcon,footercon }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.main {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
}
.leftcon{
    width:250px;
    height:400px;
    background-color: #fff;
    text-align: center;
    padding: 30px 0px;
    margin-right:5px;
    a{
       display: block;
       margin-bottom:20px;
       color:#666;
    }
    
}
.rightcon{
    flex:1;
    background-color: #fff;
}


</style>
